<template>
  <div>
    <el-card v-loading="dataListLoading" shadow="never" class="aui-card--fill el-card-contabs">
      <el-tabs type="border-card" class="main-content-border-tabs">
        <el-tab-pane v-for='(value,key,index) in dataList' :key="index" :label="$getDictLabel('FORM_CLASS', key)">
          <ul class="colorful-list clearfix">
            <li v-for="v in value" :key="v.id">
              <div class="colorful-list-item" @click="viewHandle(v)">
                <div class="colorful-list-item__container">
                  <i class="colorful-list-item__icon"></i>
                  <h3>{{ v.formName }}</h3>
                  <p class="colorful-list-item__desc" v-if="v.remark">{{v.remark}}</p>
                  <p>编号：{{v.formCode}}</p>
                  <div class="colorful-list-item__btn">开始填报 <i class="el-icon-right"></i></div>
                </div>
              </div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<style scoped>
  .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 5px 0;
  }

  .el-main {
    padding: 0 20px 20px 20px;
  }
</style>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      getDataListURL: '/drs/drsFormDef/def',
      dataListLoading: false,
      dataForm: {
        name: '',
        modelKey: ''
      },
      dataList: [],
      listColorArr: ['#f4587c', '#30c894', '#f8be4e', '#737df3', '#f83f66', '#29c2f4', '#5597f8', '#abcb3b', '#5b5bf2', '#6e6460', '#b175f5']
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http.get(
        this.getDataListURL,
        {
          params: {
            ...this.dataForm
          }
        }
      ).then(({ data: res }) => {
        this.dataListLoading = false
        this.dataList = []
        if (res.code !== 0) {
          this.dataList = []
          this.total = 0
          return
        }
        this.dataList = res.data
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    // 打开填报
    viewHandle (row) {
      // 打开路由
      var router = {
        name: 'drs-drsForm-details-' + row.id,
        id: row.id,
        menuId: this.$route.meta.menuId,
        oldName: 'drs-drsFormTabs',
        path: 'drs/drsForm-details',
        title: '填报数据--' + row.formName
      }
      var params = {
        timestamp: this.$xeutils.timestamp(),
        id: row.id
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    }
  }
}
</script>
